<template>
  <div id="app">
    <div>
        <input type="text" v-model="inputValue">
        <button @click="add"> ADD </button>
        <span @click="completedAll"> ✅</span>
    </div>
    <ul>
        <todo-item v-for="(item,index) of list"
        :key="index"
        :content="item"
        :index="index"
        @completed="getTodos"
        >
        </todo-item>
    </ul>
    <span @click="clickActiveHanlder('All')" :class="{active: activedStatus === 'All'}">All</span> |
    <span @click="clickActiveHanlder('Actived')" :class="{active: activedStatus === 'Actived'}">Actived</span> |
    <span @click="clickActiveHanlder('Completed')" :class="{active: activedStatus === 'Completed'}">Completed</span>
  </div>
</template>
<script>
import TodoItem from '../components/TodoItem'
export default {
  data: function () {
    return {
      inputValue: '',
      list: [],
      activedStatus: 'All'
    }
  },
  mounted () {
    this.getTodos()
  },
  methods: {
    add () {
      this.$axios.post('http://localhost:3000/todos',
        { 'task': this.inputValue },
        {
          headers: { 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoidG9kb191c2VyIn0.HChY9Ln9fSbStydM-XhOwiY1VzUxNgkILgimjEKf6iI' }
        }
      ).then((response) => {
        console.log(response)
        if (response.status === 201) {
          this.getTodos()
          this.inputValue = ''
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    completedAll () {
      this.$axios.patch('http://localhost:3000/todos',
        { done: true },
        {
          headers: { 'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoidG9kb191c2VyIn0.HChY9Ln9fSbStydM-XhOwiY1VzUxNgkILgimjEKf6iI' }
        }
      ).then((response) => {
        console.log(response)
        if (response.status === 204) {
          this.getTodos()
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    getTodos () {
      let allList = []
      this.getActivedTodos()
        .then(response => {
          console.log(response)
          if (response.status === 200) {
            allList = allList.concat(response.data)
          }
        })
        .then(() => {
          this.getCompletedTodos()
            .then(response => {
              console.log(response)
              if (response.status === 200) {
                allList = allList.concat(response.data)
                console.log(allList)
                this.list = allList
              }
            })
        })
        .catch(error => console.log(error))
    },
    getActivedTodos () {
      return this.$axios.get('http://localhost:3000/todos?done=eq.false&order=createDate.desc')
    },
    getCompletedTodos () {
      return this.$axios.get('http://localhost:3000/todos?done=eq.true&order=createDate.desc')
    },
    clickActiveHanlder (status) {
      this.activedStatus = status
      if (status === 'All') {
        this.getTodos()
      } else if (status === 'Actived') {
        this.getActivedTodos().then(response => {
          console.log(response)
          if (response.status === 200) {
            this.list = response.data
          }
        })
          .catch(error => console.log(error))
      } else if (status === 'Completed') {
        this.getCompletedTodos().then(response => {
          console.log(response)
          if (response.status === 200) {
            this.list = response.data
          }
        })
          .catch(error => console.log(error))
      }
    }

  },
  components: {
    'todo-item': TodoItem
  }
}
</script>

<style  scoped>
.active {
    color: rgba(20, 0, 136, 0.452);
}
</style>
